<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Plus 响应式官网示例</title>
    
    <!-- 引入 Element Plus 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 导航栏样式 */
        .navbar {
            background: #fff;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

        /* 主体内容容器 */
        .container {
            margin-top: 60px;
            padding: 20px;
        }

        /* 响应式布局调整 */
        @media (max-width: 768px) {
            .hidden-mobile {
                display: none !important;
            }
            
            .container {
                margin-top: 50px;
                padding: 10px;
            }
        }

        /* 页脚样式 */
        .footer {
            background: #f5f7fa;
            padding: 40px 20px;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 导航栏 -->
        <el-row class="navbar" :gutter="20">
            <el-col :xs="4" :sm="2" :md="2" :lg="2">
                <div class="logo" style="padding: 10px">
                    <img src="https://via.placeholder.com/40x40" alt="Logo">
                </div>
            </el-col>
            
            <el-col :xs="20" :sm="22" :md="22" :lg="22">
                <el-menu 
                    mode="horizontal"
                    :collapse="isCollapse"
                    class="hidden-mobile"
                    style="border-bottom: none">
                    <el-menu-item index="1">产品</el-menu-item>
                    <el-menu-item index="2">解决方案</el-menu-item>
                    <el-menu-item index="3">文档</el-menu-item>
                    <el-menu-item index="4">案例</el-menu-item>
                    <el-menu-item index="5" style="float: right">登录</el-menu-item>
                </el-menu>
                
                <!-- 移动端菜单按钮 -->
                <div class="visible-mobile" style="float: right; padding: 15px">
                    <el-button icon="el-icon-menu" @click="drawer = true"></el-button>
                </div>
            </el-col>
        </el-row>

        <!-- 移动端抽屉菜单 -->
        <el-drawer v-model="drawer" direction="rtl" size="60%">
            <el-menu>
                <el-menu-item index="1">产品</el-menu-item>
                <el-menu-item index="2">解决方案</el-menu-item>
                <el-menu-item index="3">文档</el-menu-item>
                <el-menu-item index="4">案例</el-menu-item>
                <el-menu-item index="5">登录</el-menu-item>
            </el-menu>
        </el-drawer>

        <!-- 主体内容 -->
        <div class="container">
            <!-- 横幅 -->
            <el-row :gutter="20" class="banner">
                <el-col :xs="24" :md="12">
                    <div style="padding: 20px">
                        <h1>Element Plus 响应式官网</h1>
                        <p>基于 Vue 3 的组件库，快速构建现代化应用</p>
                        <el-button type="primary" size="large">立即开始</el-button>
                    </div>
                </el-col>
                <el-col :xs="24" :md="12">
                    <img 
                        src="https://via.placeholder.com/600x400" 
                        alt="Banner"
                        style="width: 100%">
                </el-col>
            </el-row>

            <!-- 功能特性 -->
            <el-row :gutter="20" style="margin-top: 40px">
                <el-col 
                    v-for="(feature, index) in features"
                    :key="index"
                    :xs="24" 
                    :sm="12" 
                    :md="8" 
                    style="padding: 20px">
                    <el-card shadow="hover">
                        <h3>{{ feature.title }}</h3>
                        <p>{{ feature.description }}</p>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 页脚 -->
        <div class="footer">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="8" :md="6">
                    <h4>产品</h4>
                    <p>特性</p>
                    <p>价格</p>
                    <p>文档</p>
                </el-col>
                <el-col :xs="24" :sm="8" :md="6">
                    <h4>关于</h4>
                    <p>团队</p>
                    <p>博客</p>
                    <p>联系我们</p>
                </el-col>
                <el-col :xs="24" :sm="8" :md="12">
                    <h4>订阅我们</h4>
                    <el-input 
                        placeholder="请输入邮箱"
                        style="max-width: 300px; margin-top: 10px">
                        <template #append>
                            <el-button>订阅</el-button>
                        </template>
                    </el-input>
                </el-col>
            </el-row>
        </div>
    </div>

    <!-- 引入 Vue 3 和 Element Plus -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/element-plus@2.9.4/dist/index.full.js"></script>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    drawer: false,
                    features: [
                        {
                            title: '响应式设计',
                            description: '自动适配各种屏幕尺寸，完美支持移动端和桌面端'
                        },
                        {
                            title: '丰富组件',
                            description: '提供 50+ 高质量组件，覆盖大部分场景需求'
                        },
                        {
                            title: '主题定制',
                            description: '支持灵活的主题配置，轻松定制品牌风格'
                        }
                    ]
                }
            }
        }).use(ElementPlus).mount('#app')
    </script>
</body>
</html>